import React, { ChangeEvent, useRef, useState } from "react";
import Icon from "../Icon/icon.tsx";
import Progress from "../Progress/progress.tsx";
import { IUploadFile } from "./upload.tsx";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
library.add(fas);

interface IUploadListProps {
    fileList: IUploadFile[];
    onRemove: (_file: IUploadFile) => void;
}

const UploadList: React.FC<IUploadListProps> = (props) => {
    const { fileList, onRemove } = props;
    return (
        <ul className="upload-list">
            {fileList.map(item => {
                return (
                    <li className="upload-list-item" key={item.uid}>
                        <span className={`file-name file-name-${item.status}`}>
                            <Icon icon="file-alt" theme="secondary" />
                            {item.name}
                        </span>
                        <span className="file-status">
                            {/* 根据状态展示图标 */}
                            {(item.status === "uploading" || item.status === "ready") && (
                                <Icon icon="spinner" spin theme="primary" />
                            )}
                            {item.status === "success" && (
                                <Icon icon="check-circle" theme="success" />
                            )}
                            {item.status === "error" && (
                                <Icon icon="times-circle" theme="danger" />
                            )}
                        </span>
                        <span className="file-actions">
                            <Icon icon="times" onClick={() => { onRemove(item) }} />
                        </span>
                        {/* 进度条 */}
                        {item.status === 'uploading' && <Progress percent={item.percent || 0} />}
                    </li>
                );
            })}
        </ul>
    );
}
export default UploadList;